<template>
  <div class="mod-sys__user">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">

      <el-form-item>
        <el-input v-model="state.dataForm.userName" :placeholder="$t('nocaccount.userName')" clearable style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.tel" :placeholder="$t('nocaccount.tel')" clearable style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('nocaccount.post')">
          <el-select v-model="state.dataForm.post" placeholder="请选择" clearable>
              <el-option label="销售" value="销售"></el-option>
              <el-option label="技术" value="技术"></el-option>
              <el-option label="采购" value="采购"></el-option>
              <el-option label="厂长" value="厂长"></el-option>
              <el-option label="总经理" value="总经理"></el-option>
              <el-option label="其他" value="其他"></el-option>
          </el-select>
      </el-form-item>
      <div  style="float: right;">
      <el-form-item>
        <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <!-- 重置 -->
      <el-form-item>
          <el-button @click="resetForm"
              style="background: rgba(239, 244, 255, 1);border: 1px solid rgba(16, 98, 202, 1);color: #1062CA;border-radius: 5px;">重置</el-button>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t("nocaccount.add") }}</el-button>
      </el-form-item>
      </div>

    </el-form>
    <el-table :header-cell-style="{ 'whiteSpace': 'nowrap' }" v-loading="state.dataListLoading" :data="state.dataList"
      border @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle"
      style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="40"
        show-overflow-tooltip></el-table-column>

      <el-table-column prop="userName" :label="$t('nocaccount.userName')" header-align="center"
        align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="phone" :label="$t('nocaccount.tel')" header-align="center" align="center"
        show-overflow-tooltip></el-table-column>
      <el-table-column prop="position" :label="$t('nocaccount.post')" header-align="center" align="center"
                       show-overflow-tooltip></el-table-column>
       <el-table-column prop="createTime" :label="$t('nocaccount.createTime')" header-align="center" align="center" width="180"
              show-overflow-tooltip></el-table-column>
      <el-table-column prop="audit" :label="$t('nocaccount.status')" header-align="center" align="center"
              show-overflow-tooltip>
              <template v-slot="scope">
                <el-tag v-if="scope.row.audit === 1" type="success">{{ $t("nocaccount.statusAuditPassed") }}</el-tag>
                <el-tag v-else type="warning">{{ $t("nocaccount.statusAuditUnpass" )}}</el-tag>
              </template>
            </el-table-column>


      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="120"
        show-overflow-tooltip>
        <template v-slot="scope">
            <el-button type="primary" link
              @click="removeHandle(scope.row.userId)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"> </el-pagination>

<!-- 弹窗, 创建账号 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="refreshDataList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./noc-account-add.vue";
//import Exhibition from "./exhibition-logo.vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage, ElMessageBox } from "element-plus";

const { t } = useI18n();

const view = reactive({
  getDataListURL: "/sys/user/accountPage",
  getDataListIsPage: true,
  deleteURL: "/sys/user",
  deleteIsBatch: true,
  exportURL: "/sys/user/export",
  limit: 20,
  dataForm: {
    userName: "",
    post: "",
    tel: ""
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateRef = ref();
const addOrUpdateHandle = () => {
  addOrUpdateRef.value.init();
};


// 重置表单
const resetForm = () => {
    view.dataForm.userName = "";
    view.dataForm.post = "";
    view.dataForm.tel = "";
    state.getDataList();
};

// 移除方法
const removeHandle = (id: string) => {
  ElMessageBox.confirm(t("nocaccount.promptInfo", { handle: t("delete") }), t("prompt.title"), {
    confirmButtonText: t("confirm"),
    cancelButtonText: t("cancel"),
    type: "warning"
  }).then(() => {
    baseService.delete(`/sys/user`, [id]).then(() => {
      ElMessage.success({
        message: t("prompt.success"),
        duration: 500,
        onClose: () => {
          state.getDataList();
        }
      });
    });
  }).catch(() => {
    // 取消删除
  });
};


//刷新数据
const refreshDataList = () => {
  state.refreshDataList();
};

</script>
